
//🔹推荐 组合式 (tsx中使用{},而不是模板的{{}})
//使用方式： import Test from './components/Test'
//       <Test :count="666" />


export default defineComponent({
  props: {
    count: {
      type: Number,
      default: 0
    }
  },

  setup(props){
    
    const count_b = ref(props.count); //因为ref对字符串进行了封装

    const button_a = ()=>{
      return <a href="https://www.github.com">Github</a>
    }

    return () => (
      <>
        <div>tsx的使用</div>
        <div>参数为:{props.count}</div>
        <button onClick={()=>{ count_b.value++ }}>{count_b.value}</button>
        { button_a() }
      </>
    );
  }

})




// export default defineComponent(()=>{
//   return () => <div> Hello </div>
// })

/*🔹export default () => <div>函数式组件，直接导出一个函数。</div> （只能导一个）*/

//🔹利用defineComponent() - OptionsAPI - render为渲染函数 （不够灵活）
/*export default defineComponent({
   render(){
     return <div>Hello world!</div>
   }
})*/

//🔹组合式Api(vue2)  （要在setup返回所有变量方法，不是很方便）
/* export default defineComponent({

   setup(){
     const count = ref(0);
     return { count }
   },

   render(){
     return (
         <div>
            <button onClick={()=>{this.count++}}>
               Count: {this.count}
            </button>
         </div>
      );
   }

})*/

//🔹函数体等价于setup
/*export default defineComponent(()=>{

  const count = ref(0);


  return () => {
      <div>
         <button onClick={()=>{count.value++}}>
            Count: {count.value}
         </button>
      </div>
  }




})*/



